<template>
    <div class="container">
        <h3>加工管理</h3>
        <h3 v-show="$store.state.zangw=='1'">ལས་སྣོན་དོ་དམ་</h3>
        <el-row style="margin-top:20px;">
            <el-col :span="7">
                <el-input placeholder="请输入关键词" v-model="searchName" style="width:300px;">
                    <i slot="prefix" class="el-input__icon el-icon-search" ></i>

                    <el-button slot="append" @click="handleSearch" style="background-color: #1BC46D;color: #fff;">搜索</el-button>
                </el-input>
            </el-col>

            <el-button class='theme-button' plain v-if="!added" @click="goaddprocess" style="float:right; margin-right: 10px">新增加工</el-button>
        </el-row>

        <el-table
            :data="tableData"
            border
            style="margin-top:20px;"
            ref="multipleTable"
            :header-cell-style="{ background: 'rgba(2,179,134,0.1)',color:'rgba(0,0,0,0.85)'}"
            header-cell-class-name="table-header"
        >
            <!-- <el-table-column prop="productName" sortable label="产品名称ཐོན་རྫས་ཀྱི་མིང་"></el-table-column>
            <el-table-column prop="batch" sortable label="加工批号ལས་སྣོན་ཆོག་མཆན་ཨང་གྲངས་"></el-table-column>
            <el-table-column prop="totalNumber" sortable label="成品数量གྲུབ་རྫས་གྲངས་འབོར་">
                <template slot-scope="scope">
                    {{scope.row.totalNumber}}{{scope.row.units}}
                </template>
            </el-table-column>
            <el-table-column prop="grade" sortable label="品级རིམ་པ་"></el-table-column>
            <el-table-column prop="technology" sortable label="工艺工序བཟོ་རྩལ་ལས་རིམ་"></el-table-column>
            <el-table-column prop="createtime" sortable label="加工时间ལས་སྣོན་དུས་ཚོད།"></el-table-column> -->
            <el-table-column prop="productName" sortable label="产品名称་"></el-table-column>
            <el-table-column prop="batch" sortable label="加工批号་"></el-table-column>
            <el-table-column prop="totalNumber" sortable label="成品数量">
                <template slot-scope="scope">
                    {{scope.row.totalNumber}}{{scope.row.units}}
                </template>
            </el-table-column>
            <el-table-column prop="grade" sortable label="品级་"></el-table-column>
            <el-table-column prop="technology" sortable label="工艺工序"></el-table-column>
            <el-table-column prop="time" sortable label="加工时间།"></el-table-column>
            <el-table-column label="操作" width="150" align="center">
                <template slot-scope="scope">
                    <el-button
                        type="text"
                        @click="handleEdit(scope.row)"
                    >编辑</el-button>
                    <el-popconfirm title="确定删除该数据？" @confirm="handleRemove(scope.row)">
                        <el-button
                            slot='reference'
                            type="text"
                            style='color:#e30000;margin: 0 10px'
                        >删除</el-button>
                    </el-popconfirm>
                    <el-button
                        type="text"
                        v-if="!edit"
                        @click="handleCheck(scope.$index, scope.row)"
                    >查看</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="total, prev, pager, next, jumper" :page-size="pagesize" :current-page.sync="currentPage" :total="total"  @current-change="handleCurrentChange" style="margin-top:20px"></el-pagination>
        <el-dialog width='80%' :visible.sync="editShow" title='编辑'>
            <editProcess v-if='editShow' :processId='editId' @editFinish='editOver'></editProcess>
        </el-dialog>
    </div>
</template>

<script>
import { process_findByList, removeProcess } from '@/request/api';
import editProcess from '@/components/page/medicinalCrop/process/editProcess.vue';
export default {
    components: {
        editProcess
    },
    data() {
        return {
            editId:'',
            editShow:false,

            images:[],
            total:0,
            currentPage:1,
            pagesize:10,
            searchName: '',
            tableData: [],
            form: {},
            idx: -1,
            id: -1,
            boxCode:'',
            boxCode1:'',
            del:true,
            added:true,
            edit:true,
            action:'',
        };
    },
    created(){

    },
    mounted(){
        this.init();
        this.judgmentAuthority();
    },
    methods: {
        editOver(){
            this.editShow = false
            this.init()
        },
        async handleRemove(params){
            const res = await removeProcess('?id='+params.id)
            if(res.code == 200){
                this.$message.success(res.data)
                this.init()
            }
        },
        goaddprocess(){
            this.$router.push({
                path:'/process/addprocess'
            })
        },
        handleCurrentChange(val){
            this.currentPage = val
            this.init()
        },
        init(){
            let data = {
                page:this.currentPage,
                productName:this.searchName
            }
            process_findByList(data).then((res)=>{
                this.tableData = res.rows
                this.total = res.total
            })
        },
        handleCheck(index,row){
            this.$router.push({
                path:'/process/checkprocess',
                query:{id:row.processId}
            })
        },
        //搜索
        handleSearch(){
            this.currentPage = 1
            this.init()
        },
        handleEdit(params){
            this.$confirm("编辑该数据需要重新填写是否确定？", '提示', {
                confirmButtonClass: 'theme-button',
            }).then(() => {
                this.editShow = true
                this.editId = params.processId
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
            })
            let btn = document.getElementsByClassName('el-button el-button--default el-button--small el-button--primary theme-button')[0]
            if(btn){
                btn.style.backgroundColor = 'rgba(2,179,134,0.06)'
                btn.style.borderColor = '#02B386'
                btn.style.color = '#02B386'
            }
        },
        //删除
        handleDelete(index,row){
            this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {

            });
        },
        //判定操作按钮显示
        judgmentAuthority(){
            var type = JSON.parse(localStorage.getItem("panduanzhuangtai"))
            type.map(item1 => {
                if(item1.name == '加工管理' && item1.children != null){
                    for(var i = 0; i < item1.children.length; i++){
                        if(item1.children[i].name == '新增') this.added = false;
                        if(item1.children[i].name == '查看') this.edit = false;
                    }
                }
            })
        }

    }
}
</script>
<style scoped lang="less">

.theme-button{
    //flag
}

/deep/.el-pagination.is-background .el-pager li:not(.disabled).active{
    background: #02B386;
}
/deep/.upload-daoru{
    background: #eee;
    .el-upload{
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px
    }
}
.el-table{ margin-top: 20px;}

.el-pagination{
    text-align: right;
}
.el-col{
    margin-bottom:0;
}
</style>
